<template>
  <view class="page-container">
    <GlobalTopBar ref="topBarRef" class="topbars" :isLeft="true">
      <template #title><text>申请发票</text></template>
    </GlobalTopBar>
    <!-- 内容 -->
    <view class="page_content">
      <view class="content_box">
        <!-- 相关信息 -->
        <view class="forms">
          <view class="formsbox">
            <!-- 填写内容 -->
            <view class="form_item border_b">
              <view class="label">电子邮箱：</view>
              <input
                class="inps"
                v-model="fromDttas.receive_email"
                type="text"
                placeholder="请输入电子邮箱"
              />
            </view>
          </view>
        </view>
        <view class="btnbc" @click="doSaveServiceOrderInvoiceApply">保存</view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, reactive, watch } from 'vue';
import { useCounterStore } from '@/store';
import { onLoad, onShow } from '@dcloudio/uni-app';
import request from '@/utils/request';
import { formatTimestamp } from '@/utils/validate';
import SearchInput from '@/components/SearchInput.vue';

const store = useCounterStore();
const fromDttas = reactive({
  service_order_id: '',
  receive_email: '',
});
// 申请电子发票
const doSaveServiceOrderInvoiceApply = async () => {
  if (!fromDttas.receive_email) {
    uni.showToast({
      title: '请输入电子邮箱',
      icon: 'none',
    });
    return;
  }
  await request('wxapp/user/doSaveServiceOrderInvoiceApply', fromDttas);
  uni.navigateBack({
    delta: 1,
  });
};

onLoad((option) => {
  fromDttas.service_order_id = option.id;
});
</script>

<style lang="scss" scoped>
.topbars {
  background-color: #fff;
}

.page_content {
  box-sizing: border-box;
  padding: 20rpx;
  position: relative;
}
.forms {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  .formsbox {
    box-sizing: border-box;
    padding: 35rpx;
    background-color: #fff;
    border-radius: 20rpx;
    .titles {
      font-size: 36rpx;
      font-weight: 700;
      display: flex;
      align-items: center;
      image {
        margin-right: 20rpx;
        width: 38rpx;
        height: 38rpx;
      }
    }
    .form_item {
      padding: 20rpx 0;
      font-size: 30rpx;
      .label {
        margin-bottom: 10rpx;
      }
      .select {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
    }
  }
}
.btnbc {
  font-size: 30rpx;
  width: 60%;
  margin: 20rpx auto;
  line-height: 80rpx;
  border-radius: 40rpx;
  box-sizing: border-box;
  text-align: center;
  color: #fff;
  background: linear-gradient(to right, #3c9eff, #3183ff);
}
</style>
